Code Playground

<div class="space">
    <div class="earth-container">
        <div class="earth-pattern">
            <?xml version="1.0" encoding="UTF-8"?>
            <svg enable-background="new 0 0 122.88 122.88" version="1.1" viewBox="0 0 130 130" xml:space="preserve" xmlns="http://www.w3.org/2000/svg">
                <style type="text/css">
                    .st0{fill-rule:evenodd;clip-rule:evenodd;fill:#A1E367;filter: brightness(0.8);}
                    .st1{fill-rule:evenodd;clip-rule:evenodd;fill:#2394E0;filter: brightness(0.8);}
                </style>
                <defs>
                    <filter id="a" x="-20%" y="-20%" width="150%" height="150%">
                        <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="2"/>
                    </filter>
                </defs>
                <path class="st1 planet" d="m61.44 0c33.93 0 61.44 27.51 61.44 61.44s-27.51 61.44-61.44 61.44-61.44-27.51-61.44-61.44 27.51-61.44 61.44-61.44z" filter="url(#a)"/>
                <path class="st0" d="m11.76 93.18c-3.62-5.49-6.33-11.64-7.92-18.23l10.82 5.22 0.06 3.23c0 1.19-2.02 3.71-2.67 4.67l-0.29 5.11zm66.55-86.68c20.62 6.85 36.09 25 39.07 47.1l-1.95-0.21c-0.35 1.5-0.67 1.53-0.67 3.33 0 1.59 2 2.65 2 6 0 0.9-2.11 2.69-2.2 3.01l-3.13-3.67v4.67l-0.47-0.02-0.84-8.62-1.75 0.55-2.08-6.41-6.85 7.16-0.08 5.24-2.24 1.5-2.38-13.44-1.42 1.04-3.22-4.35-4.81 0.14-1.84-2.11-1.89 0.52-3.71-4.25-0.72 0.49 2.3 5.88h2.67v-1.33h1.33c0.96 2.66 2 1.08 2 2.67 0 5.55-6.85 9.63-11.34 10.67 0.24 1 0.15 2 1.33 2 2.51 0 1.26-0.44 4-0.67-0.13 5.67-6.5 12.44-9.22 16.65l1.22 8.69c0.32 1.89-3.92 3.88-5.36 6.01l0.69 3.33-1.95 0.79c-0.34 3.42-3.66 7.21-7.39 7.21h-4c0-4.68-3.34-11.37-3.34-14.68 0-2.81 1.33-3.19 1.33-6.67 0-3.22-3.33-7.83-3.33-8.67v-5.34h-2.67c-0.4-1.49-0.15-2-2-2h-0.67c-2.91 0-2.42 1.33-5.34 1.33h-2.67c-2.41 0-6.67-7.72-6.67-8.67v-8c0-3.45 3.16-7.21 5.34-8.67v-3.33l3-3.05 1.67-0.28c3.58 0 3.15-2 5.34-2h6v4.67l6.6 2.82 0.62-2.85c2.99 0.7 3.77 2.03 7.45 2.03h1.33c2.53 0 2.67-3.36 2.67-6l-5.34 0.53-2.33-5.06-2.31 0.61c0.42 1.81 0.64 1.06 0.64 2.59 0 0.9-0.74 1-1.34 1.33l-2.31-5.86-4.97-3.55-0.66 0.65 4.23 4.45c-0.56 1.6-0.63 6.21-2.96 2.98l2.18-1.05-5.44-5.7-3.26 1.27-3.22 3.08c-0.34 2.48-1.01 3.73-3.61 3.73-1.73 0-0.69-0.45-3.34-0.67v-6.67h6l-1.95-4.44-0.72 0.44v-1.34l9.75-4.49c-0.18-1.4-0.41-0.65-0.41-2.18 0-0.09 0.65-1.32 0.67-1.34l2.52 1.57-0.6-2.87-3.89 0.8-0.72-3.49c3.08-1.62 9.87-7.34 12.03-7.34h2c2.11 0 7.75 2.08 8.67 3.33l-5.35-0.54 3.97 3.27 0.38-1.4 2.96-0.81 0.04-1.85h1.34v2l7.59-2.19z"/>
            </svg>
        </div>
    </div>

body {
  background-color: #030102;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.space {
  background: rgba(128, 0, 128, 0.1) center/200px 200px round;
  width: 100vw;
  height: 100vh;
}

.earth-container {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  border-radius: 50%;
  z-index: 100;
}

.earth-pattern {
  width: 100%;
  height: 100%;
  position: relative;
}

.range-container {
  z-index: 100;
  position: absolute !important;
  left: 51%;
  top: 50%;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  -moz-transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
}

#circle {
  width: 500px;
  height: 500px;
  border: 2px dashed #666;
  border-radius: 100%;
  float: left;
  margin-right: 40px;
}

#slider {
  position: relative;
  height: 30px;
  width: 30px;
  left: 235px;
  top: -15px;
  border-radius: 100%;
  cursor: pointer;
  background: #d6d6d6;
}

.range {
  float: left;
  width: 30px;
}

.stars-container {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: -999;
}

.star {
  position: absolute;
  color: #ff6813;
  user-select: none;
  transition: opacity 0.5s ease-in-out;
  animation: pulse 1s infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    filter: brightness(100%);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(130%);
  }
  100% {
    transform: scale(1);
    filter: brightness(100%);
  }
}
.star.fade-in {
  opacity: 1;
}

.star.fade-out {
  opacity: 0;
}

function fadeIn(element, duration) {
    element.style.opacity = 0;
    element.style.display = 'block';

let opacity = 0;
    const interval = 50;
    const gap = interval / duration;

const fading = setInterval(() => {
        opacity += gap;
        element.style.opacity = opacity;

if (opacity >= 1) {
            clearInterval(fading);
        }
    }, interval);
}

function fadeOut(element, duration) {
    let opacity = 1;
    const interval = 50;
    const gap = interval / duration;

const fading = setInterval(() => {
        opacity -= gap;
        element.style.opacity = opacity;

if (opacity <= 0) {
            clearInterval(fading);
            element.style.display = 'none';
        }
    }, interval);
}

function placeStars(container, numStars) {
    const colors = ['red', 'blue', 'green', 'yellow', 'orange', 'purple', 'pink'];
    const minFontSize = 8;
    const maxFontSize = 10;
    const minStars = 40;

const stars = container.querySelectorAll('.star');

for (let x = 1; x !== numStars; x++) {
        let randomAction = Math.random() < 0.5 ? 'add' : 'remove';

if (randomAction == 'add') {
            const star = document.createElement('div');
            star.classList.add('star');
            star.innerText = '+';

const randomTop = Math.random() * 100;
            const randomLeft = Math.random() * 100;
            star.style.top = `${randomTop}%`;
            star.style.left = `${randomLeft}%`;

const randomColorIndex = Math.floor(Math.random() * colors.length);
            const randomColor = colors[randomColorIndex];

const randomFontSize = minFontSize + Math.random() * (maxFontSize - minFontSize);
            star.style.fontSize = `${randomFontSize}px`;

container.appendChild(star);

fadeIn(star, 1000);
            star.style.color = randomColor;
        } else {
            if (stars.length >= minStars) {
                const starsToRemove = Array.from(stars).slice(1);

starsToRemove.forEach(star => {
                    fadeOut(star, 1000);
                    setTimeout(() => star.remove(), 1000);
                });
            }
        }
    }
}

document.addEventListener('DOMContentLoaded', function() {
	var container = document.querySelector('.range-container');
	var starsContainer = document.querySelector('.stars-container');
	var slider = document.getElementById('slider');
	var sliderW2 = slider.offsetWidth / 2;
	var sliderH2 = slider.offsetHeight / 2;
	var radius = 250;
	var deg = 0;
	var elP = document.getElementById('circle').getBoundingClientRect();
	var elPos = { x: elP.left, y: elP.top };
	var X = 0,
		Y = 0;
	var mdown = false;
	var numStars = 50;
	var debounceTimer = null;

function debounce(func, delay) {
		clearTimeout(debounceTimer);
		debounceTimer = setTimeout(func, delay);
	}

function handleMouseMove(e) {
		if (mdown) {
			var mPos = { x: e.clientX - elPos.x, y: e.clientY - elPos.y };
			var atan = Math.atan2(mPos.x - radius, mPos.y - radius);
			deg = -atan / (Math.PI / 180) + 180; // final (0-360 positive) degrees from mouse position

X = Math.round(radius * Math.sin(deg * Math.PI / 180));
			Y = Math.round(radius * -Math.cos(deg * Math.PI / 180));

slider.style.left = X + radius - sliderW2 + 'px';
			slider.style.top = Y + radius - sliderH2 + 'px';

slider.style.transform = 'rotate(' + deg + 'deg)';
			slider.style.webkitTransform = 'rotate(' + deg + 'deg)';
			slider.style.MozTransform = 'rotate(' + deg + 'deg)';

document.querySelector('input[name="angle"]').value = Math.ceil(deg);

const newNumStars = Math.max(Math.ceil(Math.abs(deg) / 10) + 1, 5);
			placeStars(starsContainer, newNumStars);
			numStars = newNumStars;
		}
	}

container.addEventListener('mousedown', function(e) {
		mdown = true;
	});

container.addEventListener('mouseup', function(e) {
		mdown = false;
	});

container.addEventListener('mousemove', function(e) {
		debounce(function() {
			handleMouseMove(e);
		}, 10);
	});

document.addEventListener('keydown', function(e) {
		if (e.key === 'ArrowLeft') {
			deg -= 5;
		} else if (e.key === 'ArrowRight') {
			deg += 5;
		}

X = Math.round(radius * Math.sin(deg * Math.PI / 180));
		Y = Math.round(radius * -Math.cos(deg * Math.PI / 180));

slider.style.left = X + radius - sliderW2 + 'px';
		slider.style.top = Y + radius - sliderH2 + 'px';

slider.style.transform = 'rotate(' + deg + 'deg)';
		slider.style.webkitTransform = 'rotate(' + deg + 'deg)';
		slider.style.MozTransform = 'rotate(' + deg + 'deg)';

document.querySelector('input[name="angle"]').value = Math.ceil(deg);

const newNumStars = Math.max(Math.ceil(Math.abs(deg) / 10) + 1, 5);
		placeStars(starsContainer, newNumStars);
		numStars = newNumStars;
	});
	
	function handleTouchMove(e) {
    if (mdown) {
        var touch = e.touches[0];
        var touchPos = { x: touch.clientX - elPos.x, y: touch.clientY - elPos.y };
        var atan = Math.atan2(touchPos.x - radius, touchPos.y - radius);
        deg = -atan / (Math.PI / 180) + 180; // final (0-360 positive) degrees from touch position

X = Math.round(radius * Math.sin(deg * Math.PI / 180));
        Y = Math.round(radius * -Math.cos(deg * Math.PI / 180));

slider.style.left = X + radius - sliderW2 + 'px';
        slider.style.top = Y + radius - sliderH2 + 'px';

slider.style.transform = 'rotate(' + deg + 'deg)';
        slider.style.webkitTransform = 'rotate(' + deg + 'deg)';
        slider.style.MozTransform = 'rotate(' + deg + 'deg)';

document.querySelector('input[name="angle"]').value = Math.ceil(deg);

const newNumStars = Math.max(Math.ceil(Math.abs(deg) / 10) + 1, 5);
        placeStars(starsContainer, newNumStars);
        numStars = newNumStars;

e.preventDefault(); // Prevent scrolling on touch devices
    }
}

container.addEventListener('touchstart', function(e) {
    mdown = true;
});

container.addEventListener('touchend', function(e) {
    mdown = false;
});

container.addEventListener('touchmove', function(e) {
    debounce(function() {
        handleTouchMove(e);
    }, 10);
});

placeStars(starsContainer, numStars);
});

Frontend Forever App